<script type="text/javascript" src="/ecomerce/js/jsHomeadm.js"></script>
<script type="text/javascript" src="/ecomerce/js/producto.js"></script>
<script>
    $(document).ready(function() {
          //SELECCION DE IMAGENES AGREGARCATEGORIAS 
        $('#categoriafile').change(function() {
            var fileName = $('#categoriafile').val();
            var clean = fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path 
            $("#filenamehiddcategoria").val(clean);
          
        });
        //SELECCION DE IMAGENES EDITARCATEGORIAS
        /****************************************************/
        $('#editcategoriafile').change(function() {
            var fileName = $('#editcategoriafile').val();
            var clean = fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path 
            $("#editfileinputcategoria").val(clean);
            
        });
        /****************************************************/
        //OPEN DIV NUEVA CATEGORIA BUTTON
        //-----------------------------------
        $("#adddiv").click(function() {
            $("#formimagene").trigger("reset");
            $("#addproinput").val($("#idproducto").val());
            $("#divimagene").dialog("open");

        }); 
        //ocultar barras de progreso
        $("#progimagene").hide();
 //DECLARACION DIALOG DIV AGREGAR 
        $("#divimagene").dialog({
            height: 'auto',
            width: 'auto',
            autoOpen: false,
            modal: true,
            show: {
                effect: "blind",
                duration: 300
            },
            hide: {
                effect: "blind",
                duration: 300
            }
        }).css("font-size", "15px", "width", "auto");
        $('#divimagene').submit(function(e) {
            e.preventDefault();
        });
        /****************************************************/
 //SELECCION DE IMAGENES AGREGAR 
        $('#imagenefile').change(function() {
            var fileName = $('#imagenefile').val();
            var clean = fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path 
            $("#filenamehiddimg").val(clean);

        });
        
        /****************************************************/
        //GUARDAR BUTTON ADD DIALOG ADD IMAGENES
        $("#subirimagenenueva").click(function(e) {
            e.preventDefault();
                     $.ajax({
                url: "http://localhost:26/ecomerce/Imagenes",
                type: "POST",
                data: $("#formimagene").serialize(),
                success: function() {
                    if ($("#imagenefile").val()) {
                        $("#progimagene").show();
                        $("#imagenefile").upload("http://localhost:26/ecomerce/Imagenes/subirimagen", function(e) {
                            $("#respuesta").html(e);
                            imagenesproductos($("#addproinput").val());
                            alert("Agregada con exito");
                            $("#divimagene").dialog("close");
                            $("#progimagene").hide();
                        }, $("#progimagene"));

                    }else{ 
                        alert("Seleccione una imagen");           
                    }
                },
                error: function() {
                    alert("No fue agregada");
                }
            });

        });
        /****************************************************/
    });
</script>
<section id="contenedor">
    <div id="top"></div>
    <div id="izq">
        <div id="divcategoria" >
            <center><span class="title">Categorias</span></center>
            <center>
                <div id="list-categorias" class="contenedores">   

                </div> 
            </center>

            <center><button id="addcategoria" class="botoncitos">Agregar categoria</button></center><br>

            <center><button id="todos" class="botoncitos">Mostar Todos</button></center><br>

        </div>
        <div id="divproductopresentar">
            <center><span class="title">Productos</span></center>
            <center><button id="adddivproducto" class="botoncitos">Agregar Producto</button></center><br>
            <div id="list-productos" >

            </div>

        </div>

    </div>

    <div id="der">

    </div>
</section>

<!-- AGREGAR CATEGORIAS -->
<div id="divcategorias" title="Nueva Categoria">
    <div id="stylized" class="myform">
    <form id="formcategoria" method="POST">
        <label>Nombre: </label><input id="nombre" class="fieldform" type="text" name="categoria"><br><br>
        <input id="filenamehiddcategoria"  type="text" name="filename">
        <input id="dir" type="hidden" name="dir" value="img\uploads\categoria\filename">
    </form></div>
    <input type="file" id="categoriafile" name="categoriafile" />
    <p><progress id="prog" value="0" min="0" max="100"></progress></p>

    <div id="respuesta"></div>
    <br><br><hr>

    <button class="subir"  id="subircategoria">Guardar</button>


</div>
<!--EDITAR CATEGORIAS -->
<div id="editarcategoria" title="Editar Categoria">

    <button class="subir" type="button"  id="eliminarcategoria">x</button>
    <div id="stylized" class="myform">
    <form id="formedit" method="POST">
        <label>Nombre: </label><input id="editcatinput" class="fieldform" type="text" name="categoria"><br>
        <input id="editfileinputcategoria"  type="text" name="filename">
        <input id="editdirinput" type="hidden" name="dir" value="img\uploads\categoria\filename">

    </form></div>
    <input type="file" id="editcategoriafile" name="categoriafile" />
    <p><progress id="progedit" value="0" min="0" max="100"></progress></p>
    <div id="respuestaedit"></div>
    <br><br><hr>

    <button class="subir" type="button"  id="editarbutton">Guardar</button>


</div>
<!--AGREGAR PRODUCTOS -->
<div id="divproducto" title="Agegar Producto">
    <div id="stylized" class="myform">
    <form id="formproducto" method="POST">
        
        <label>Producto:</label> <input id="addproinput" class="fieldform" type="text" name="producto" required><br>
        <label>Detalle:</label> <br><textarea id="adddetinput" class="fieldform" name="detalleProducto" required></textarea><br>
        <label>Stock: </label><input id="addstoinput" class="fieldform" type="text" name="stock" required><br>
        <label>Precio Compra: </label><input id="addcominput" class="fieldform" type="text" name="precioCompra" required><br>
        <label>Precio Venta: </label><input id="addveninput" class="fieldform" type="text" name="precioVenta" required><br>
        <label>Categoria:</label> <div id="list-categoria"></div><br>
        <input id="addcatinput" class="fieldform" type="hidden" name="categoria_id" >
          <input class="subir" type="submit"  id="guardarproducto" value="Guardar">
    </form></div>
</div>

<!--EDITAR PRODUCTOS -->
<div id="editarproducto" title="Editar Producto">
    <div id="stylized" class="myform">
    <form id="formeditproducto" method="POST">
        <label>Producto: </label><input id="editproinput" class="fieldform" type="text" name="producto" required><br>
        <label>Detalle: </label><br><textarea id="editdetinput" class="fieldform"  name="detalleProducto"></textarea><br>
        <label>Stock: </label><input id="editstoinput" class="fieldform" type="text" name="stock" required><br>
        <label>Precio Compra:</label> <input id="editcominput" class="fieldform" type="text" name="precioCompra" required><br>
        <label>Precio Venta:</label> <input id="editveninput" class="fieldform" type="text" name="precioVenta" required><br>
        <label>Categoria: </label><div id="list-categoria2"></div><br>
        <input id="editcatinputselect" class="fieldform" type="hidden" name="categoria_id">
            <input class="subir" type="submit"  id="editarbuttonproducto" value="Guardar Cambios">
    </form><div>
</div>

<!-- DIALOGO PRODUCTO DETALLE-->
<div id="detproducto" title="Detalles del Producto ">
    <div id="izqdetpro">
        <div id="detalleProducto" title="Detalle del producto">
        </div>
        <input id="idproducto" type="hidden">
<button  id="adddiv" class="botones">Nueva Imagen</button>
    </div>
    <div id="derdetpro">
    </div>

</div>

<!-- AGREGAR IMAGENES -->

<div id="divimagene" title="Nueva Imagen">
    <input type="file" id="imagenefile" name="imagenefile" />
    <p><progress id="progimagene" value="0" min="0" max="100"></progress></p>
    <div id="respuesta"></div>
    <form id="formimagene" method="POST">
        <input id="filenamehiddimg"  type="hidden" name="filename">
        <input id="dir" type="hidden" name="dir" value="img\uploads\imagene\filename">
        <input id="addproinput" class="fieldform" type="hidden" name="producto_id">
    </form>
    <br><br>
    <button class="subir" type="button" id="subirimagenenueva">Guardar</button>


</div>